@extends('layout.default')

@section('stylesheet')
  <link href="//cdn.bootcss.com/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
@stop

@section('layout.content')
<div class="space-32"></div>
  <div class="row">
    <div class="col-xs-12">      
      <form class="form-horizontal" id="issue" autocomplete="off">
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="name"> <b>主题：</b> </label>
          <div class="col-sm-6">
            <input type="text" class="form-control" name="name" placeholder="活动主题"/>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="idcard"> <b>属性：</b> </label>
          <div class="col-sm-6">
            <div class="radio">
              <label class="inline no-padding-left">
                <input name="checkin" type="checkbox" value="1" class="ace ace-checkbox-2 input-lg" checked="checked">
                <span class="lbl"> 公开(签到显示)</span>
              </label>
              <label class="inline">
                <input name="show" type="checkbox" value="1" class="ace ace-checkbox-2 input-lg" checked="checked">
                <span class="lbl"> 展示(查询显示)</span>
              </label>
              <label class="inline">
                <input name="signin" type="checkbox" value="1" class="ace ace-checkbox-2 input-lg">
                <span class="lbl"> 接受报名</span>
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="branch"> <b>所属分支：</b> </label>
          <div class="col-sm-6">
            <input type="hidden" name="branch" value="{{Auth('admin')->user()->branch->id}}">
            <p class="form-control-static">{{Auth('admin')->user()->branch->fullname}}（{{Auth('admin')->user()->branch->name}}）</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right"> <b>活动日期：</b></label>

          <div class="col-sm-6">
            <div class="input-daterange input-group">
              <input type="text" class="form-control" name="date_begin" value="{{date('Y-m-d')}}"/>
              <span class="input-group-addon">
            <i class="fa fa-exchange"></i>
          </span>
              <input type="text" class="form-control" name="date_end" value="{{date('Y-m-d')}}"/>
            </div>
          </div>

        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="desc"> <b>简介：</b> </label>
          <div class="col-sm-6">
            <textarea class="form-control" name="desc" placeholder="活动介绍" rows="6"></textarea>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label"></label>
          <div class="col-sm-6">
            <button type="submit" class="btn btn-primary">
              <i class="ace-icon fa fa-check"></i>
              确定
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>
@stop


@section('javascript')
  <script src="//cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="/assets/js/jquery-validate-methods.js"></script>

  <script type="text/javascript">
      jQuery(function ($) {

          $('.input-daterange').datepicker({
              format: 'yyyy-mm-dd',
              autoclose: true,
              todayHighlight: true,
              orientation: 'bottom',
              language: 'zh-CN'
          });


          /**
           表单前端验证
           */
          $("#issue").validate({
              rules: {
                  name: {
                      required: true
                  }
              },
              messages: {
                  name: {
                      required: "请填写活动主题"
                  }
              },


              /* 失去焦点时不验证 */
              onfocusout: false,
              onkeyup: false,
              errorElement: 'div',
              errorClass: 'help-block',

              success: function (e) {
                  $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                  $(e).remove();
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.tips(v.message, v.element, {tips: [3,'#dd0000'], time: 21000});
                      return false;
                  });

              },

              submitHandler: function (form) {

                  $.post('{{route('activity.store')}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'name': $("input[name='name']").val(),
                      'branch_id': $("input[name='branch']").val(),
                      'date_begin': $("input[name='date_begin']").val(),
                      'date_end': $("input[name='date_end']").val(),
                      'checkin': $("input[name='checkin']:checked").val(),
                      'show': $("input[name='show']:checked").val(),
                      'signin': $("input[name='signin']:checked").val(),
                      'desc': $("textarea[name='desc']").val(),
                      'is_submit': true
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {time: 1000, shift: -1}, function () {
                          if (data.status === true && data.url != null) {
                              $(window).attr('location', data.url);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });

              }

          });

      })

  </script>
@stop